<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :visible.sync="showDialogUpload"
    :before-close="handleClose"
    width="50%"
    title="选择文件"
  >
    <div class="resumable-drop" ref="dropzone">
      <div ref="browser" class="resumable-drop-text">
        <div class="resumable-drop-title">
          拖动目录或文件到此或<u>选择文件</u>
        </div>
      </div>
    </div>
    <el-table
      :data="fileList"
      :border="true"
      style="width: 100%"
      size="mini"
      :header-cell-style="tableHeaderColor"
      :row-class-name="tableRowClassName"
    >
      <el-table-column label="素材" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.fileName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文件大小" width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.fileSize | formatSize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80px">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="deleteItem(scope.row.uniqueIdentifier)"
            size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button class="primary-button" plain @click.prevent="close(true)"
        >确定</el-button
      >
      <el-button plain @click.prevent="close(false)" class="white-button"
        >取消</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import Resumable from '@/assets/js/resumable'
import Utils from '@/utils/utils'

export default {
  props: {
    showDialogUpload: {
      type: Boolean,
      required: true
    },
    currentFileList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      resumable: null,
      fileList: [],
      expireTime: 'Thu Dec 31 2099 00:00:00 GMT+0800',
      isErrorType: false,
      fileType: 'video'
    }
  },
  filters: {
    formatSize(value) {
      return Utils.formatBytes(value)
    }
  },
  methods: {
    reload() {
      const self = this
      this.resumable = new Resumable({
        method: 'octet'
      })
      this.fileList = []
      this.resumable.assignDrop(this.$refs.dropzone)
      this.resumable.assignBrowse(this.$refs.browser)
      this.resumable.on('fileAdded', file => {
        let curIndex = self.currentFileList.findIndex(
          x => x.uniqueIdentifier === file.uniqueIdentifier
        )
        if (curIndex === -1) {
          curIndex = self.fileList.findIndex(
            x => x.uniqueIdentifier === file.uniqueIdentifier
          )
          if (curIndex === -1) {
            self.fileList.splice(0, 0, {
              file: file.file,
              fileName: file.fileName,
              fileSize: file.size,
              modifyTime: file.file.lastModified,
              uniqueIdentifier: file.uniqueIdentifier,
              curProgress: 0,
              amamComplete: false,
              amamError: false,
              status: 'PENDING',
              md5: Utils.createUUIDString()
            })
            file.successAdded = true
          }
        } else {
          file.successAdded = false
          this.$message({
            message: `${file.fileName}文件已添加`,
            type: 'warning'
          })
        }
      })
    },
    deleteItem(id) {
      const curIndex = this.fileList.findIndex(x => x.uniqueIdentifier === id)
      if (curIndex !== -1) {
        this.fileList.splice(curIndex, 1)
        const curFile = this.resumable.getFromUniqueIdentifier(id)
        if (curFile) {
          curFile.cancel()
        }
      }
      this.isErrorType = false
    },
    handleClose(done) {
      this.close(false)
      done()
    },
    close(ok) {
      if (ok) {
        if (this.fileList && this.fileList.length === 0) {
          this.$message({
            message: '文件不能为空',
            type: 'warning'
          })
          return
        }
        this.fileList.forEach(x => {
          x.expireTime = new Date(this.expireTime).getTime() + 86399000
        })
        const typelist =
          '3g2,3ga,3gp,3gp2,3gpp,669,avi,asf,a52,amv,divx,dvr-ms,f4v,flv,gvi,gxf,mpc,mpe,mpeg,mpeg1,mpeg2,mpeg4,mpg,mpga,mp4,mp4v,mpv2,mka,mkv,mod,mov,m1v,m2t,m2ts,m2v,mk3d,m4v,mts,mtv,mxf,mv,nsv,nuv,qt,rmvb,rm,ra,ram,tod,ts,vob,vlc,vob,voc,vqf,vro,wmv,wm,wtv,wvx,xvid,webm'
        const audiotypelist = 'cda,wav,mp3,wma,ra,midi,ogg,ape,flac,aac'
        this.fileList.some(x => {
          const namelist = x.fileName.split('.')
          const suffix = namelist[namelist.length - 1]
          if (
            typelist.indexOf(suffix.toLowerCase()) === -1 &&
            this.fileType === 'video'
          ) {
            this.$message({
              message: `${x.fileName} 非视频文件`,
              type: 'warning'
            })
            this.isErrorType = true
            return true
          }
          if (
            audiotypelist.indexOf(suffix.toLowerCase()) === -1 &&
            this.fileType === 'audio'
          ) {
            this.$message({
              message: `${x.fileName} 非音频文件`,
              type: 'warning'
            })
            this.isErrorType = true
            return true
          }
          const fileSize = x.fileSize
          if (fileSize > 1 * 1024 * 1024 * 1024) {
            this.$message({
              message: `${x.fileName} 文件超过最大1G`,
              type: 'warning'
            })
            this.isErrorType = true
            return true
          }
        })
        if (!this.isErrorType) {
          this.$emit('close', {
            ok,
            fileList: this.fileList
          })
        }
      } else {
        this.$emit('close', {
          ok,
          fileList: []
        })
      }
    },
    tableHeaderColor() {
      return 'background-color: #EFEFEF;color:#333333;border-bottom: 1px solid #36373A;font-size: 14px;;'
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 !== 1) {
        return 'even-row'
      }
      return 'odd-row'
    }
  },
  watch: {
    showDialogUpload: {
      handler() {
        this.$nextTick(() => {
          if (this.showDialogUpload) {
            this.reload()
          }
        })
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.resumable-drop {
  height: 300px;
  font-size: 14px;
  text-align: center;
  color: #909399;
  font-weight: 100;
  background-color: #ffffff;
  border: 1.8px dotted #aaa;
  z-index: 9999;
}

.resumable-drop-text {
  height: 300px;
  cursor: pointer;
}

.resumable-drop-title {
  padding-top: 142px;
}
.resumable-list {
  overflow: auto;
  margin-right: -20px;
  display: none;
}

.el-table {
  background-color: #ffffff;
  margin-top: 20px;
}
</style>
